import * as THREE from 'three'
import earthVertex from '../../../shaders/earth/vertex.vs.glsl'
import earthFragment from '../../../shaders/earth/fragment.fs.glsl'

// import { createAnimateLine, getCirclePoints } from '@/Utils/common'

import glow_img from '@/assets/images/earth/glow1.png'
import earth_cw from '@/assets/images/earth/earth-cw.jpg'
// 地球外围贴图
export let earthApertureTexTure = null
export const earthAperture = (threeInfo) => {
  let { radius, group } = threeInfo
  // TextureLoader创建一个纹理加载器对象，可以加载图片作为纹理贴图
  let textureLoader = new THREE.TextureLoader()
  earthApertureTexTure = textureLoader.load(glow_img)
  // let texture = textureLoader.load(glow_img)

  // 创建精灵材质对象SpriteMaterial
  const spriteMaterial = new THREE.SpriteMaterial({
    map: earthApertureTexTure, // 设置精灵纹理贴图
    color: 0x4390d1,
    transparent: true, //开启透明
    opacity: 0.7, // 可以通过透明度整体调节光圈
    depthWrite: false, //禁止写入深度缓冲区数据
  })
  spriteMaterial.name = '外层光圈贴图'
  // 创建表示地球光圈的精灵模型
  const sprite = new THREE.Sprite(spriteMaterial)
  sprite.scale.set(radius * 3.0, radius * 3.0, 1) //适当缩放精灵
  // sprite.name = '光晕'
  group.add(sprite)
}

// 扫光动画
// 根据路由切换颜色
let color = '#091768'
function changeColor(currentPath) {
  if (currentPath === '/home') {
    color = '#091768'
  } else if (currentPath === '/supply') {
    color = '#2c278f'
  } else if (currentPath === '/finance') {
    color = '#122f77'
  } else if (currentPath === '/human') {
    color = '#084c66'
  }
}
export let sweepLightTexTure = new THREE.TextureLoader().load(earth_cw)

const uniforms = {
  glowColor: {
    value: new THREE.Color(color),
  },
  scale: {
    type: 'f',
    value: -1.0,
  },
  bias: {
    type: 'f',
    value: 1.0,
  },
  power: {
    type: 'f',
    value: 1.0,
  },
  time: {
    type: 'f',
    value: 1.0,
  },
  isHover: {
    value: false,
  },
  map: {
    // value: null,
    value: sweepLightTexTure,
  },
  opacity: {
    value: 1,
  },
}
export const sweepLight = (threeInfo) => {
  let { radius, group, currentPath } = threeInfo
  changeColor(currentPath)
  uniforms.glowColor.value = new THREE.Color(color)
  const earth_material = new THREE.ShaderMaterial({
    // wireframe: true, // 显示模型线条
    uniforms: uniforms,
    vertexShader: earthVertex,
    fragmentShader: earthFragment,
  })
  earth_material.needsUpdate = true
  earth_material.transparent = true
  const earth_geometry = new THREE.SphereBufferGeometry(radius + 0.3, 50, 50)
  const earth_mesh = new THREE.Mesh(earth_geometry, earth_material)
  group.add(earth_mesh)
}

// 扫光动画函数
export const sweepLightFn = () => {
  uniforms.time.value = uniforms.time.value < -80 ? 80 : uniforms.time.value - 1
}

// 地球外围离子保护层效果
export const earthProtectVertex = (threeInfo) => {
  let { radius, group } = threeInfo
  // 地球外围离子保护层效果
  const earth_border = new THREE.SphereBufferGeometry(radius + 18, 60, 60)
  const pointMaterial = new THREE.PointsMaterial({
    color: 0x81ffff, //设置颜色，默认 0xFFFFFF
    transparent: true,
    sizeAttenuation: true,
    opacity: 0.1,
    size: 0.01, //定义粒子的大小。默认为1.0
  })
  const points = new THREE.Points(earth_border, pointMaterial) //将模型添加到场景
  group.add(points)
}

export const earthAnimation = (threeInfo) => {
  earthAperture(threeInfo)
  sweepLight(threeInfo)
  earthProtectVertex(threeInfo)
}

/*------------------- 以下未使用代码 -------------------*/

// 环绕微信 start
// // 添加卫星 （初始化函数内使用）
// const circleLineList = []
// const createAnimateCircle = (threeInfo) => {
//   let { radius, group } = threeInfo
//   // 创建 圆环 点
//   const list = getCirclePoints({
//     radius: radius + 15,
//     number: 150, //切割数
//     closed: true, // 闭合
//   })
//   const mat = new THREE.MeshBasicMaterial({
//     color: '#fff',
//     transparent: true,
//     opacity: 0.2,
//     side: THREE.DoubleSide,
//   })
//   const line = createAnimateLine({
//     pointList: list,
//     material: mat,
//     number: 100,
//     radius: 0.1,
//   })
//   group.add(line)

//   // 在clone两条线出来
//   const l2 = line.clone()
//   l2.scale.set(1.2, 1.2, 1.2)
//   l2.rotateZ(Math.PI / 6)
//   group.add(l2)

//   const l3 = line.clone()
//   l3.scale.set(0.8, 0.8, 0.8)
//   l3.rotateZ(-Math.PI / 6)
//   group.add(l3)

//   /**
//    * 旋转的球
//    */
//   const ball = new THREE.Mesh(
//     new THREE.SphereBufferGeometry(1, 32, 32),
//     new THREE.MeshBasicMaterial({
//       color: '#e0b187', // 745F4D
//     })
//   )

//   const ball2 = new THREE.Mesh(
//     new THREE.SphereBufferGeometry(1, 32, 32),
//     new THREE.MeshBasicMaterial({
//       color: '#628fbb', // 324A62
//     })
//   )

//   const ball3 = new THREE.Mesh(
//     new THREE.SphereBufferGeometry(1, 32, 32),
//     new THREE.MeshBasicMaterial({
//       color: '#806bdf', //6D5AC4
//     })
//   )

//   circleLineList.push(line, l2, l3)
//   ball.name = ball2.name = ball3.name = '卫星'

//   for (let i = 0; i < 2; i++) {
//     const ball01 = ball.clone()
//     // 一根线上总共有几个球，根据数量平均分布一下
//     const num = Math.floor(list.length / 2)
//     ball01.position.set(
//       list[num * (i + 1)][0] * 1,
//       list[num * (i + 1)][1] * 1,
//       list[num * (i + 1)][2] * 1
//     )
//     line.add(ball01)

//     const ball02 = ball2.clone()
//     const num02 = Math.floor(list.length / 2)
//     ball02.position.set(
//       list[num02 * (i + 1)][0] * 1,
//       list[num02 * (i + 1)][1] * 1,
//       list[num02 * (i + 1)][2] * 1
//     )
//     l2.add(ball02)

//     const ball03 = ball2.clone()
//     const num03 = Math.floor(list.length / 2)
//     ball03.position.set(
//       list[num03 * (i + 1)][0] * 1,
//       list[num03 * (i + 1)][1] * 1,
//       list[num03 * (i + 1)][2] * 1
//     )
//     l3.add(ball03)
//   }
// }
// // 卫星环绕执行函数 （在infoRender函数里使用）
// const surround = () => {
//   circleLineList.forEach((e) => {
//     e.rotateY(-0.01)
//   })
// }
// 环绕卫星 end

// 添加坐标标签 start
// 添加坐标标签(国家数据标签 HTML 版本，暂时不用）
// const createLabelObj = (item) => {
//   const coord = lon2xyz(radius, item.lon, item.lat)
//   let labelDiv = document.createElement('div') //创建div容器
//   labelDiv.className = 'label_name'
//   labelDiv.innerHTML = `
//     <div class='label_count'>
//       <div>
//       ${item.name}
//       </div>
//       <div>
//         <span>12万</span>
//       </div>
//     </div>
//   `
//   // 给标签设置坐标位置
//   let pointLabel = new CSS2DObject(labelDiv)
//   pointLabel.name = item.name
//   pointLabel.position.set(coord.x, coord.y, coord.z)

//   // group.add(coordVec3)
//   scene.add(pointLabel)
// }
// 添加坐标标签 end

// 添加光柱 start
// const infoColumn = (item) => {
//   // 根据 perData 计算大小
//   let coefficient = 0.1
//   if (!quName.includes(item.name)) {
//     coefficient = item.perData / 150
//   }
//   const material = new THREE.MeshBasicMaterial({
//     color: item.color,
//     transparent: true,
//     opacity: 0.2,
//     side: THREE.DoubleSide,
//     // map: new THREE.TextureLoader().load(gradient),
//   })

//   const coord = lon2xyz(radius * 1.01, item.lon, item.lat)
//   const coordVec3 = new THREE.Vector3(coord.x, coord.y, coord.z).normalize()
//   const geometry = new THREE.CylinderGeometry(0.2, coefficient, 0.1)
//   const mesh = new THREE.Mesh(geometry, material) as any
//   // mesh.name = item.name
//   mesh.privateType = 'column'
//   mesh.position.set(coord.x, coord.y, coord.z)
//   mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), coordVec3)
//   group.add(mesh)
//   // scene.add(group)
// }
// 添加光柱 end
